{
 
    const table = { 
        normal : {
            elementTemplate : `
                        <table :class="styleType[Number(type)]">
                        <thead>
                            <tr>
                                <th v-for="title in dataTitle" >{{title}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="col in dataSet">
                                <td v-for="item in col">{{item}}</td> 
                            </tr>
                        </tbody>
                        </table>
            `,
            prototypeTemplate : `  
                        <div class="form-group"> 
                            <label>表格样式:</label>
                            <select class="form-control" v-model="type">
                                    <option value="0">样式1</option> 
                                    <option value="1">样式2</option> 
                                    <option value="2">样式3</option> 
                                    <option value="3">样式5</option>
                                    <option value="4">样式6</option>
                            </select>
                        </div>
                        <div class="form-group"> 
                            <label>表格数据源:</label>
                            <textarea class="form-control jscode" rows="10" placeholder="Textarea" v-model="jsCode"></textarea>
                        </div>
                        <div class="form-group">  
                            <button class="btn btn-default" v-on:click="doGenerate">生成表格</button>
                        </div>
            `,
            _constructor : function () {
                return { 
                    data: { 
                        styleType : [
                            'table',
                            'table table-striped',
                            'table table-bordered',
                            'table table-hover',
                            'table table-condensed'
                        ],
                        type : 0,
                        jsCode : `
this.dataUrl = "";
this.dataTitle = ["Engine", "Browser", "Platform", "Version", "Grade"];
this.dataSet = [
        ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
        ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
        ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
        ['Trident','Internet Explorer 6','Win 98+','6','A'],
        ['Trident','Internet Explorer 7','Win XP SP2+','7','A']
];
                        `,
                        dataSet : [],
                        dataTitle : [],
                        dataUrl : []
                    },

                    methods: { 
                        doGenerate : function() {
                            eval(this.jsCode);
                        }
                    },

                    beforeMount : function () {
                        eval(this.jsCode);
                    }
                }
            }
        }

    }


    if ( window.TEMPLATE && !window.TEMPLATE.table ) {
        window.TEMPLATE.table = table
    }
}